<!--组件-选着参数-->
<template>
  <div class="VASelect">

    <text class="font30 text2 title">{{title}}</text>

    <div class="frame bg2" @click="frameClick">
      <text class="font30 fontz text1 all">{{text}}</text>
      <LImage class="img-arrow" v-if="selects.length>1" :src="Config.img('xiala.png')" />
    </div>
  </div>
</template>

<script>

//功能
import jmodal from "@/_js/modal";
import jconfig from "@/_js/config";
export default {

  model:{
    prop:"value",
    event:"change",
  },

  props:{
    
    value: { //值
      type:String,
      default:'',
    },

    selects:{ //类型选项
      type:Array,
      default:undefined,
    },

    title: { //标题
      type:String,
      default:undefined,
    },

    valueKey: { //取值关键字
      type:String,
      default:'',
    },
  },

  data() {
    return {   
      Config:jconfig,
    };
  },

  mounted() {

  },

  computed: {

    text() {
      var text = this.selects[this.value];
      if (this.valueKey) {
        return text[this.valueKey];
      }
      return text;
    }
  },

  methods:{

    /********************************************** 点击触发*/
    //选择点击
    frameClick() {
      if (this.selects.length < 2) return;

      var options = [];
      this.selects.forEach(map => {
        var str = this.valueKey ? map[this.valueKey] : map;
        options.push(str);
      });
      
      jmodal.actionSheet(options, this.text, (text)=>{

        for (var index = 0; index < this.selects.length; index++) {

          var item = this.selects[index];
          var str = this.valueKey ? item[this.valueKey] : item;
          if (str == text) {
            this.$emit("change", index);
            this.$emit("select", index);
            break;
          }
        }
      });
    },
  }
}
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
.VASelect {
  flex-direction: row;
  align-items: center;
}
.title{
  width: 170px;
  margin-right: 20px;
}
.frame{
  flex: 1;
  flex-direction: row;
  align-items: center;

  height: 88px;
  border-radius: 10px;
  
  padding: 0 30px;
}
.img-arrow {
  width: 20px;
  height: 20px;
  margin-left: 20px;
}
</style>
